<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <link rel="apple-touch-icon" href="favicon.png">
  <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
  <title>特价商品</title>
  <link rel="stylesheet" href="../css/normalize.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="css/priceRanking201906181700.css">
  <link rel="stylesheet" type="text/css" href="/js/mint-ui/mint-ui.css"/>
  <link rel="stylesheet" type="text/css" href="../js/cube-ui/cube.min.css"/>
</head>
<body>
  <div id="app" v-cloak>
    <div class="header">
      <span class="header-fanhui" @click="goback()">返回</span>
      <em>特价商品</em>
    </div>

    <div class="tablist">
      <ul>
        <li :class="{active:typeId==1}" @click="changeAll()">综合</li>
        <li :class="{active:typeId==2}" @click="changeArea()">区域</li>
        <li :class="{active:typeId==3}" @click="changeCategory()">分类</li>
        <li :class="{active:typeId==4}" @click="changeBrand()">品牌</li>
      </ul>
    </div>

    <div class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="8">
        <!-- <template v-if="goodslist&&goodslist.length>0">
            <div class="shop_content" v-for="(goods,index) in goodslist" :key="goods.goodsSkuId">
            <img class="shop_photo" :src="goods.image" />
            <div class="shop_info">
                <h3>{{goods.fullName}}</h3>
                <p>最低价：{{goods.minPrice}}元 {{goods.minSupermarket}}</p>
                <span class="shop_price" @click="otherPrice(index)">查看其它超市价格</span><span class="count" @click="cartdialogShow(index)">加入购物车</span>
            </div>
            </div>
        </template>
        <template v-else-if="goodslist&&goodslist.length==0">
            <div class="no-result">没有任何商品！</div>
        </template> -->
        <ul v-if="goodslist && goodslist.length>0">
            <li class="search-goodsBox" v-for="(goods,index) in goodslist" :key="index">
                <img :src="goods.image" class="search-goodsImg">
                <div class="search-goodsInfo">
                    <h3 class="search-goodsName">{{goods.fullName}}</h3>
                    <p class="search-goodsDescribe">规格：{{goods.attrValues}}</p>
                    <p class="search-goodsSpread">价差率：{{goods.spreadRate}}%</p>
                    <div class="search-goodsPriceBox"><em class="search-goodsRMB">￥</em><span class="search-goodsPrice">{{goods.minPrice}}</span><div class="search-goodsTriangle" @click="morePrice($event,index)">比价</div></div>
                    <a class="search-goodsBtn" @click="placeOrder(index)">立即下单</a>
                </div>
            </li>
        </ul>
        <div class="search-noGoodsBox" v-else-if="goodslist && goodslist.length === 0">
          <div class="search-noGoods">暂无商品</div>
        </div>
    </div>

    <div class="brand-input" v-show="typeId==4&&goodslist==null">
      <form @submit.prevent action="#"><input type="search" placeholder="请输入品牌关键字" v-model="sreachValue" ref="sreachInput" @keypress="searchBrand($event)"></form>
      <div class="brand-layer" v-show="sreachValue&&brandlist&&brandlist.length>0" :style="Style">
        <ul>
          <li v-for="(brand,index) in brandlist" :key="brand.brandId" @click="getBrand(index)">{{brand.name}}</li>
        </ul>
      </div>
    </div>

    <cube-popup type="my-popup" :position="position" :mask-closable="true" ref="myPopup4">
        <div class="search-addCartBox">
            <div class="search-addCartGoods" v-if="goodslist && goodslist.length > 0">
                <img :src="goodslist[addCartIndex].image" class="search-addCartGoodsImg">
                <div class="search-addCartGoodsInfo">
                    <h1 class="search-addCartGoodsName">{{goodslist[addCartIndex].fullName}}</h1>
                    <span class="search-addCartGoodsNorms">规格：{{goodslist[addCartIndex].attrValues}}</span>
                    <span class="search-addCartGoodsSpread">价差率：{{goodslist[addCartIndex].spreadRate}}%</span>
                    <div class="search-addCartGoodsPriceBox"><em class="search-addCartGoodsRMB">￥</em><span class="search-addCartGoodsPrice">{{goodslist[addCartIndex].minPrice}}</span></div>
                    <div class="search-addCartStep"><i class="search-addCartReduce" @click="reduce()"></i><span class="search-addCartNum">{{num}}</span><i class="search-addCartPlus" @click="plus()"></i></div>
                </div>
            </div>
            <div class="search-btnAddCartBox">
                <div class="search-btnAddCart" @click="addCart">加入购物车</div>
                <div class="search-btnDirectBuy" @click="toBUy">直接购买</div>
                <!-- <div class="search-btnAddCart" @click="addCart()">加入购物车</div> -->
            </div>
        </div>
    </cube-popup>

    <div class="search-popupBox" v-show="showPopup">
        <div class="search-popupMask" @click="closePopup()"></div>
        <div class="search-popupContent" :style="popupTop" ref="searchPopup">
            <i class="search-popupTriangleTop" :style="triangleStyle" v-if="popupTriangle === 'top'"></i>
            <i class="search-popupTriangleBottom" :style="triangleStyle" v-else-if="popupTriangle === 'bottom'"></i>
            <div class="search-popup" v-if="goodslist && goodslist.length > 0">
                <div class="search-popupTitle">附近超市比价</div>
                <div class="search-popupGoodsBox">
                    <div>
                        <img :src="goodslist[popupIndex].image" class="search-popupGoodsImg">
                        <p class="search-popupGoodsSpread">最高价差率</p>
                        <p class="search-popupGoodsOrange"><span class="search-popupGoodsBig">{{goodslist[popupIndex].spreadRate}}</span>%</p>
                    </div>
                    <div>
                        <div class="search-popupGoodsName">{{goodslist[popupIndex].fullName}}</div>
                        <div class="search-popupMarket">
                            <ul>
                                <li class="search-popupMarketList" v-for="(market,index) in marketlist" :key="index"><span class="search-popupMarketName">{{market.supermarketName}}</span><span class="search-popupMarketPrice">{{market.price}}</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="layer" v-show="dialogShow">
        <div class="layerbg"></div>
        <div class="layer-container">
            <div class="layer_other" v-show="otherMarket">
            <h1>其它超市价格</h1>
            <h3>{{name}}</h3>
            <div class="market">
                <ul>
                    <li v-for="market in marketlist" :key="market.markerName"><p>{{market.supermarketName}}</p><span>{{market.price}}</span></li>
                </ul>
            </div>
            <div class="rate">价差率：{{spreadRate}}%</div>
            <div class="buy_sure"><span @click="btnCancel()">确定</span></div>
            </div>
            <div class="layer_cart" v-show="cartShow">
                <h1>选择数量</h1>
                <span class="layer_reduce" @click="btnReduce()"></span><h3>{{num}}</h3><span class="layer_plus" @click="btnPlus()"></span>
                <div class="layer_button">
                    <span class="layer_cancel" @click="btnCancel()">取消</span>
                    <span class="layer_ok" @click="btnOk()">确定</span>
                </div>
            </div>
            <div class="layer_tips" v-show="tipsText">
                <h1>温馨提示</h1><h3 v-html="tipsText"></h3>
                <div class="layer_button">
                  <span class="layer_cancel" @click="btnAddCancel()">取消</span><span class="layer_ok" @click="btnAddOK()">去设置</span>
                </div>
            </div>
        </div>
    </div>

    <div class="toast" v-show="errMsg"><span v-html="errMsg"></span></div> -->

    <div class="popup-regions-box">
      <div class="ui-mask" v-show="layerShow"></div>
      <transition name="bottom-up">
        <div class="ui-pop" v-show="layerShow">
          <div class="ui-pop-close" @click="close()">
            <a>
              <i class="icon-close"></i>
            </a>
          </div>
          <div class="ui-pop-conten">
            <div class="region-tab">
              <span
                v-for="(item,index) in regions"
                :key="index"
                :class="{active:index==curIndex}"
                @click="changeTab(index)">{{item.name}}</span>
            </div>
            <div class="region-list">
              <dl class="rl1">
                <dd
                  v-for="list in curList"
                  :key="list.id"
                  @click="select(list)">{{list.name}}</dd>
              </dl>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/fetch20190612.js"></script>
  <script src="../js/rem.js"></script>
  <script src="../js/mint-ui/mint-ui.js"></script>
  <script src="../js/cube-ui/cube.min.js"></script>
  <script src="js/priceRanking201905271400.js"></script>
  <script src="../js/check.js"></script>
</body>
</html>
